<template>
  <div class="container mt-5">
    <div class="card">
      <div class="card-header">
        商品补货表
      </div>
      <div class="card-body">
        <form @submit.prevent="add">
          <div class="row g-4">
            <div class="col-auto">
              <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1">商品名称</span>
                <input type="text" class="form-control" placeholder="请输入商品名称" v-model.trim="tea_name" />
              </div>
            </div>
            <div class="col-auto">
              <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1">供应商</span>
                <input type="text" class="form-control" placeholder="请输入供应商名称" v-model.trim="supplier" />
              </div>
            </div>
            <div class="col-auto">
              <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1">进货数量</span>
                <input type="number" class="form-control" placeholder="请输入进货数量" v-model.number="quantity" />
              </div>
            </div>
            <div class="col-auto">
              <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1">单价</span>
                <input type="number" class="form-control" placeholder="请输入单价" v-model.number="unit_price" />
              </div>
            </div>
            <div class="col-auto">
              <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1">进货日期</span>
                <input type="date" class="form-control" placeholder="请输入进货日期" v-model="purchase_date" />
              </div>
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-primary">添加</button>
            </div>
          </div>
        </form>
 
        <div v-if="editId" class="card mt-3">
          <div class="card-header">
            编辑奶茶进货记录
          </div>
          <div class="card-body">
            <form @submit.prevent="update">
              <div class="row g-4">
                <div class="col-auto">
                  <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">商品名称</span>
                    <input type="text" class="form-control" placeholder="请输入商品名称" v-model.trim="editTeaName" />
                  </div>
                </div>
                <div class="col-auto">
                  <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">供应商</span>
                    <input type="text" class="form-control" placeholder="请输入供应商名称" v-model.trim="editSupplier" />
                  </div>
                </div>
                <div class="col-auto">
                  <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">进货数量</span>
                    <input type="number" class="form-control" placeholder="请输入进货数量" v-model.number="editQuantity" />
                  </div>
                </div>
                <div class="col-auto">
                  <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">单价</span>
                    <input type="number" class="form-control" placeholder="请输入单价" v-model.number="editUnitPrice" />
                  </div>
                </div>
                <div class="col-auto">
                  <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">进货日期</span>
                    <input type="date" class="form-control" placeholder="请输入进货日期" v-model="editPurchaseDate" />
                  </div>
                </div>
                <div class="col-auto">
                  <button type="submit" class="btn btn-primary">保存</button>
                </div>
              </div>
            </form>
          </div>
        </div>
 
        <table class="table table-striped table-hover table-bordered">
          <thead>
            <tr>
              <th scope="col">序号</th>
              <th scope="col">商品名称</th>
              <th scope="col">供应商</th>
              <th scope="col">进货数量</th>
              <th scope="col">单价</th>
              <th scope="col">进货日期</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.tea_name }}</td>
              <td>{{ item.supplier }}</td>
              <td>{{ item.quantity }}</td>
              <td>{{ item.unit_price }}</td>
              <td>{{ item.purchase_date }}</td>
              <td>
                <a href="javascript:;" @click="edit(item.id)">编辑</a>
                <a href="javascript:;" @click="remove(item.id)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
// 定义渲染表格所需的数据
const list = ref([
  { id: '1', tea_name: '珍珠奶茶', supplier: '新茶 供应商', quantity: 20, unit_price: 10, purchase_date: '2024-12-01' },
]);
 
// 定义添加进货记录所需的数据
let tea_name = ref('');
let supplier = ref('');
let quantity = ref(0);
let unit_price = ref(0);
let purchase_date = ref('');
let nextId = ref(Math.max(...list.value.map(item => parseInt(item.id))) + 1); // 计算下一个id
 
// 定义编辑相关的数据变量
let editId = ref('');
let editTeaName = ref('');
let editSupplier = ref('');
let editQuantity = ref(0);
let editUnitPrice = ref(0);
let editPurchaseDate = ref('');
 
// 删除功能的方法
const remove = id => {
  list.value = list.value.filter(item => item.id !== id);
};
 
// 添加功能的方法
const add = () => {
  if (tea_name.value === '') {
    alert('商品名称为必填项！');
    return;
  }
  if (quantity.value === 0) {
    alert('进货数量必须大于 0！');
    return;
  }
  if (unit_price.value === 0) {
    alert('单价必须大于 0！');
    return;
  }
  if (purchase_date.value === '') {
    alert('进货日期为必填项！');
    return;
  }
 
  const obj = {
    id: nextId.value.toString(),
    tea_name: tea_name.value,
    supplier: supplier.value,
    quantity: quantity.value,
    unit_price: unit_price.value,
    purchase_date: purchase_date.value,
  };
 
  list.value.push(obj);
 
  // 清空添加表单
  tea_name.value = '';
  supplier.value = '';
  quantity.value = 0;
  unit_price.value = 0;
  purchase_date.value = '';
  nextId.value++; // 更新下一个id
};
 
// 编辑功能的初始化方法
const edit = id => {
  const target = list.value.find(item => item.id === id);
  if (target) {
    editId.value = id;
    editTeaName.value = target.tea_name;
    editSupplier.value = target.supplier;
    editQuantity.value = target.quantity;
    editUnitPrice.value = target.unit_price;
    editPurchaseDate.value = target.purchase_date;
  }
};
 
// 更新编辑后的数据
const update = () => {
  const index = list.value.findIndex(item => item.id === editId.value);
  if (index !== -1) {
    list.value[index] = {
      id: editId.value,
      tea_name: editTeaName.value,
      supplier: editSupplier.value,
      quantity: editQuantity.value,
      unit_price: editUnitPrice.value,
      purchase_date: editPurchaseDate.value,
    };
  }
 
  // 清空编辑表单
  editId.value = '';
  editTeaName.value = '';
  editSupplier.value = '';
  editQuantity.value = 0;
  editUnitPrice.value = 0;
  editPurchaseDate.value = '';
};
</script>
<style scoped>
/* 全局容器样式 */
.container {
  max-width: 800px;
  margin: 10vh auto 15vh;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
 
/* 卡片样式 */
.card {
  margin-bottom: 20px;
  border: 1px solid #e3e6f0;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
 
/* 卡片头部样式 */
.card-header {
  background-color: #f7f7f9;
  border-bottom: 1px solid #e3e6f0;
  padding: 10px 20px;
  font-size: 1.25rem;
  font-weight: bold;
  color: #333;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  
  
}
 
/* 表单输入组样式 */
.input-group {
  margin-bottom: 15px;
}
 
.input-group-text {
  background-color: #f7f7f9;
  border: 1px solid #e3e6f0;
  border-right: none;
  padding: 10px;
  color: #666;
}
 
.form-control {
  border: 1px solid #e3e6f0;
  border-radius: 4px;
  padding: 10px;
  font-size: 1rem;
  color: #333;
}
 
/* 表单按钮样式 */
button.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  color: white;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
}
 
button.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}
 
/* 表格样式 */
.table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}
 
.table th, .table td {
  padding: 12px;
  border: 1px solid #e3e6f0;
  text-align: left;
}
 
.table th {
  background-color: #f7f7f9;
  color: #333;
  font-weight: bold;
}
 
.table tr:nth-child(even) {
  background-color: #f9f9f9;
}
 
.table tr:hover {
  background-color: #f1f1f1;
}
 
/* 操作链接样式 */
a {
  color: #007bff;
  text-decoration: none;
  margin-right: 10px;
}
 
a:hover {
  color: #0056b3;
}
</style>